<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>查看合同</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>
    <style>
        * {
            font-family: "Microsoft Yahei" !important;
            overflow-y: hidden;
        }

        nav button {
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            float: right !important;
            margin-top: 10px
        }


        nav {
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        nav div {
            float: left !important;
            margin: 15px;
        }

        .layui-tab-title {
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
        }

        .layui-tab {
            margin: 0;
        }

        .content {
            height: 509px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }

        .layui-tab-content {
            background-color: #F5F7FA;
        }

        .search {
            display: inline;
            margin-bottom: 1px;
            padding-top: 6px;
            padding-bottom: 6px;
            width: 185px;
            border: 0;
        }

        .layui-form-label {
            width: 150px;
        }

        .spanText {
            margin-top: 10px;
            display: inline-block;
            margin-right: 5px;
            background: #e8e8e8;
            color: #333;
            border-radius: 30px;
            line-height: 27px;
            padding-left: 20px;
            padding-right: 20px;
            position: relative;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layui-form-select dl {
            z-index: 9999;
        }

        .relative {
            background-color: rgba(0, 0, 0, 0.05);
            line-height: 27px;
            padding: 5px 0;
            margin-top: 15px;
            width: 70%;
        }

        p {
            line-height: 38px
        }
    </style>
</head>
<body>
<form class="layui-form" id="ajaxforms" action="/contract/insertContract">
    <nav>
        <div>查看合同</div>
        <button type="button" style="float: right;margin-right: 30px" class="layui-btn layui-btn-primary layui-btn-sm return" onclick="history.go(-1)" contractId="">
            返回
        </button>
        <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm save" style="margin-right: 30px" contractId="" runId="" attachmentId="" attachmentName="">保存</button>--%>
    </nav>

    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>合同正文</li>
                <li>子合同</li>
                <li>结算情况</li>
                <li>订单</li>
                <li>相关流程</li>
                <li>提醒计划</li>
                <li>附件</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="content">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同编号</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="contractNo"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同标题</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="title"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同类型</label>
                                    <div class="layui-input-inline layui-form" lay-filter="mySelect">
                                        <p readonly type="text" name="typeId"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同种类</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="contract_type"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同对象</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="targetName"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">主合同</label>
                                    <div class="layui-input-inline;border-bottom: 1px solid #ccc">
                                        <p readonly type="text" name="parentId"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">金额大写</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="moneyCp"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同金额</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="money"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aUser"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">乙方</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bUser"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方地址</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aAddress"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">乙方地址</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bAddress"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方联系人</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aLinkman"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">乙方联系人</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bLinkman"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方电话</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aPhone"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">乙方电话</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bPhone"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方签字</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aSign"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">乙方签字</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bSign"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">甲方签字时间</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="aSignTime"></p>
                                    </div>
                                </div>
                                <div  class="layui-inline">
                                    <label class="layui-form-label">乙方签字时间</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="bSignTime"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div  class="layui-inline">
                                    <label class="layui-form-label">授权时间</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="date_comment"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">授权代表</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="authorized_representative"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同工期开始时间</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="duration_startdate"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同工期结束时间</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="duration_enddate"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">对方单位</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="othersideunit"></p>
                                    </div>
                                </div>
                                <%--ssssssssssss--%>
                                <div class="layui-inline">
                                    <label class="layui-form-label">执行单位</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="executive_unit"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">所属部门</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="dept_id"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">备注</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="remarks"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">风险评估</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="risk_assessment"></p>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同评审</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="contract_approval"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline" style="width: 708px">
                                    <label class="layui-form-label">跟进人</label>
                                    <div class="layui-inline" id="userId">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同履行地点</label>
                                    <div class="layui-input-inline">
                                        <p readonly type="text" name="do_address"></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <textarea id="texPart" style="display: none;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content" id="local">
                            <div>
                                <ul class="localAet">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <div class="layui-tab layui-tab-brief">
                                <%--<ul class="layui-tab-title">--%>
                                <%--<li class="layui-this">基本信息</li>--%>
                                <%--<li>合同正文</li>--%>
                                <%--<li style="float: right"> <button type="button" class="layui-btn layui-btn-primary layui-btn layui-btn-sm export">导出</button></li>--%>
                                <%--<li style="float: right"> <input type="checkbox" name="exportBox" title="包含子合同" lay-skin="primary"> </li>--%>
                                <%--</ul>--%>
                                <div class="layui-tab-content" style="background: white">
                                    <div class="layui-tab-item layui-show">
                                        <div id="addTableDiv" class="layui-card-body">
                                            <table class="layui-hide" id="settlementOf"
                                                   lay-filter="settlementOf"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <div id="orderTableDiv" class="layui-card-body">
                                <table class="layui-hide" id="order" lay-filter="order"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <div>
                                <ul class="flow">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <div id="planTableDiv" class="layui-card-body">
                                <table class="layui-hide" id="plan"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="content">
                            <div>
                                <span class="num"><i class="layui-icon layui-icon-link"></i> 0个附件</span>
                                <%-----%>
                                <%--<span style="color:#03a9f4;cursor:pointer">下载全部</span>--%>
                            </div>
                            <div class="attachment">

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    $('.layui-input-inline').width($(document.body).width() / 3 - 50);
    $('.layui-input-inline select').width($(document.body).width() / 3);
    $('.content').height($(window).height() - 130);
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);

        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }
    var data = {
        contractId: GetQueryString('contractId')
    };
    $('.export').click(function () {
        var type = $('[name="exportBox"]').prop('checked')
        if (type == true) {
            window.location = "/contract/exportProject?contractId=" + data.contractId + '&Flag=' + 1;
        } else {
            window.location = "/contract/exportProject?contractId=" + data.contractId + '&Flag=' + 0;
        }
    })

    layui.use(['form', 'layedit', 'laydate', 'table', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , layedit = layui.layedit
            , table = layui.table
            , upload = layui.upload;
        var index = layedit.build('texPart'); //建立编辑器
        $(function () {
            $('input').css("border", "none");
            $.ajax({
                url: '/contract/selectContractFlowById',
                type: 'get',
                dataType: 'json',
                data: data,
                success: function (data) {
                    var data = data.obj
                    if (data != '' && data != undefined) {
                        for (var i = 0; i < data.length; i++) {
                            var opflag=data[i].opFlag
                            var flowId=data[i].flowId
                            var prcsId=data[i].prcsId
                            var flowStep=data[i].flowStep
                            var runId=data[i].runId
                            $('.flow').append('<li><span class="spanText"><a href="#" onclick="skip(0,1,'+opflag+','+flowId+','+prcsId+','+flowStep+','+runId+')">' + data[i].runIds[0].runName + '</a></span></li>')
                        }
                    } else {
                        $('.flow').append('<div class="no_notice" style="text-align: center;border: none;">' +
                            '<img style="margin-top: 62px;"  src="/img/main_img/shouyekong.png" alt="">' +
                            '<h2 style="text-align: center;color: #666;font-size: 14px;margin-top: 10px;">暂无数据</h2>' +
                            '</div>')
                    }
                }
            });

            $.ajax({
                url: '/contract/selectContractById',
                type: 'get',
                dataType: 'json',
                data: data,
                success: function (data) {
                    var data = data.object
                    if (data.attachment != undefined && data.attachment != '') {
                        var str = ''
                        for (var i = 0; i < data.attachment.length; i++) {
                            str += '  <div style="margin: 10px 20px;" class="relative">' +
                                '  <span class="accessory" style="padding-left: 20px;">' +
                                '   <i class="layui-icon layui-icon-tabs"></i>' +
                                '   <span>' + data.attachment[i].attachName + '</span>' +
                                '  <a style="float: right;cursor:pointer;padding-right: 20px;" href=/download?' + data.attachment[i].attUrl + '>下载</a>' +
                                <%--<a style="float: right;margin-right: 20px;cursor:pointer">查看</a>--%>
                                '      <span style="float: right;margin-right: 50px">' + data.attachment[i].size + '</span>' +
                                '    </span>' +
                                '   </div>'
                            $('.num').html('<i class="layui-icon layui-icon-link"></i> ' + (i + 1) + '个附件')
                            $('.attachment').html(str)
                        }
                    }
                    if (data.subContracts != undefined && data.subContracts != '') {
                        for (var i = 0; i < data.subContracts.length; i++) {
                            var href=data.subContracts[i].contractId
                            $('.localAet').append('<li><span class="spanText"><a href="#" onclick="skip('+href+')">' + data.subContracts[i].title + '</a><span></li>')
                        }
                    } else {
                        $('.localAet').append('<div class="no_notice" style="text-align: center;border: none;">' +
                            '<img style="margin-top: 62px;"  src="/img/main_img/shouyekong.png" alt="">' +
                            '<h2 style="text-align: center;color: #666;font-size: 14px;margin-top: 10px;">暂无数据</h2>' +
                            '</div>')
                    }
                    $('[name="contractNo"]').text(data.contractNo)
                    $('[name="title"]').text(data.title)
                    $('[name="targetName"]').text(data.targetName)
                    $('[name="money"]').text(data.money)
                    $('[name="moneyCp"]').text(data.moneyCp)
                    $('[name="aUser"]').text(data.aUser)
                    $('[name="bUser"]').text(data.bUser)
                    $('[name="aAddress"]').text(data.aAddress)
                    $('[name="bAddress"]').text(data.bAddress)
                    $('[name="aLinkman"]').text(data.aLinkman)
                    $('[name="bLinkman"]').text(data.bLinkman)
                    $('[name="aPhone"]').text(data.aPhone)
                    $('[name="bPhone"]').text(data.bPhone)
                    $('[name="aSign"]').text(data.aSign)
                    $('[name="bSign"]').text(data.bSign)
                    $('[name="aSignTime"]').text(data.aSignTime)
                    $('[name="bSignTime"]').text(data.bSignTime)
                    $('[name="remarks"]').text(data.remarks)
                    $('[name="typeId"]').text(data.typeName)
                    $('[name="parentId"]').text(data.parentName)
                    $('[name="authorized_representative"]').text(data.authorized_representative)
                    $('[name="date_comment"]').text(data.date_comment)
                    $('[name="contract_type"]').text(data.codeName)
                    $('[name="duration_startdate"]').text(data.duration_startdate)
                    $('[name="duration_enddate"]').text(data.duration_enddate)
                    $('[name="executive_unit"]').text(data.codeNames)
                    $('[name="do_address"]').text(data.do_address)
                    $('[name="dept_id"]').text(data.deptName)
                    $('#userId').html('<p class="localAetspanText" userId=' + data.userId + '>' + data.userName + '</p>')
                    //合同评审
                    if(data.contract_approval==0){
                        data.contract_approval = '否'
                    }else{
                        data.contract_approval = '是'
                    }
                    $('[name="contract_approval"]').text(data.contract_approval)

                    //风险评估
                    if(data.risk_assessment==0){
                        data.risk_assessment = '否'
                    }else{
                        data.risk_assessment = '是'
                    }
                    $('[name="risk_assessment"]').text(data.risk_assessment)

                    //对方单位
                    if(data.othersideUnit==1){
                        data.othersideUnit = '甲方'
                    }else{
                        data.othersideUnit = '乙方'
                    }
                    $('[name="othersideunit"]').text(data.othersideUnit)
                    layedit.setContent(index, data.content);
                }
            });
        })
        table.render({
            elem: '#settlementOf'
            , url: '/contract/selectContractProjectById'
            , where: data
            , cols: [[
                {field: 'contractId', title: '合同编号', width: 150}
                , {field: 'projectType', title: '款项性质', width: 100}
                , {field: 'payType', title: '款项类别', width: 100}
                , {field: 'money', width: 120, title: '款项金额（元）'}
                , {field: 'payWay', title: '打款方式', width: 100}
                , {field: 'payAccount', title: '打款账号', width: 150}
                , {field: 'payTime', width: 180, title: '打款时间'}
                , {field: 'invoiceTime', width: 180, title: '开票时间'}
                , {
                    field: 'runId', title: '关联流程', templet: function (b) {
                        var runStr = ''
                        for (var i = 0; i < b.runIds.length; i++) {
                            runStr += b.runIds[i].runName + ','
                        }
                        return runStr
                    }
                }
                , {field: 'remarks', title: '备注'}
            ]]
            , page: true
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "data": res.object //解析数据列表
                };
            }
        });
        table.render({
            elem: '#order'
            , url: '/contract/selectContractTransportById'
            , where: data
            , cols: [[
                {field: 'shippingDate', title: '发货时间', width: 200}
                , {field: 'number', title: '发货数量', width: 100}
                , {
                    field: 'runId', title: '关联流程', templet: function (b) {
                        var runStr = ''
                        for (var i = 0; i < b.runIds.length; i++) {
                            runStr += b.runIds[i].runName + ','
                        }
                        return runStr
                    }
                }
                , {field: 'remarks', title: '备注'}
            ]]
            , page: true
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "data": res.object //解析数据列表
                };
            }
        });
        table.render({
            elem: '#plan'
            , url: '/contract/selectContractRemindById'
            , where: data
            , cols: [[{field: 'userName', title: '提醒对象', width: 300}
                , {field: 'remindDate', title: '提醒日期', width: 200}
                , {field: 'content', title: '提醒内容'}
                , {field: 'remarks', title: '备注'}
            ]]
            , page: true
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "data": res.object //解析数据列表
                };
            }
        });
    });
    function skip(url,num,opflag,flowId,prcsId,flowStep,runId) {
        if(num==1){
            window.open('/workflow/work/workform?opflag='+opflag+'&flowId='+flowId+'&prcsId='+prcsId+'&flowStep='+flowStep+'&runId='+runId+'')
        }else{
            window.open('/contract/details?contractId='+url)
        }

    }
</script>

</html>
